<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <title>Document</title>
</head>

<body>
  <!-- 头部 -->
  <header class="container-fluid">
    <div class="row">
      <div class="col-xs-4">
        <img class="logo" src="../img/logo.jpg" alt="">
      </div>
      <div class="col-xs-8">
        <div id="search">
          <input type="text" class="form-control" placeholder="请输入书名">
          <button class="btn" type="submit">Go</button>
        </div>
      </div>
    </div>
  </header>
  <!-- 导航栏 -->
  <nav class="container hidden-xs">
    <div class="nav-row">
      <div class="col-sm-3"><a href="">分类</a></div>
      <div class="col-sm-3"><a href="#">首页</a></div>
      <div class="col-sm-3"><a href="#">我要卖书</a></div>
      <div class="col-sm-3">
          <div class="menu">
            <div>个人中心</div>
            <div>
              <div class="drop">我的</div>
              <div class="drop">设置</div>
              <div class="drop"><a href="../html/helpcenter.html" target="_blank">帮助中心</a></div>
            </div>
          </div>
      </div>
  </nav>
  <!-- 中心模块 -->
  <article class="container">
    <div class="row">
      <div id="sort" class="col-sm-3 hidden-xs">
        <ul>
          <li class="subj">数学</li>
          <li class="line">————————————</li>
          <li class="subj">计算机</li>
          <li class="line">————————————</li>
          <li class="subj">外语</li>
          <li class="line">————————————</li>
          <li class="subj">物理化学</li>
          <li class="line">————————————</li>
          <li class="subj">法律</li>
          <li class="line">————————————</li>
          <li class="subj">经济学</li>
          <li class="line">————————————</li>
          <li class="subj">历史</li>
          <li class="line">————————————</li>
          <li class="subj">工程技术</li>
          <li class="line">————————————</li>
          <li class="subj">医药卫生</li>
          <li class="line">————————————</li>
          <li class="subj">哲学心理</li>
          <li class="line">—————————————</li>
          <li class="subj">艺术</li>
          <li class="line">—————————————</li>
        </ul>
        <div class="shengming"><p>提醒：</p>
          注意保护个人隐私与钱财！
        </div>
      </div>
      <div id="article-right" class="col-sm-9">
        <div class="article-rtop">
        <!-- 图片轮播 -->
       <div class="container">
        <div id="photo">
          <img src="../img/图片轮播1.jpg" alt="">
          <img src="../img/图片轮播4.jpg" alt="">
          <img src="../img/图片轮播3.jpg" alt="">
        </div>
       </div>
      </div>

        <!-- 书本展示 -->
        <div class="article-rbottom">
          <div class="row">
            <div class="col-xs-6 col-md-4 col-lg-3">
              <a href="../html/xiangqingye.html" target="_blank"><img src="../img/骆驼祥子.jpg" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3">
              <a href="#"><img src="../img/高数.jpg" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 hidden-sm hidden-xs">
              <a href="#"><img src="../img/马克思.png" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 visible-lg">
              <a href="#"><img src="../img/数据结构.png" alt=""></a>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col-md-4 col-lg-3">
              <a href="#"><img src="../img/数电.png" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3">
              <a href="#"><img src="../img/近现代史.png" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 hidden-sm hidden-xs">
              <a href="#"><img src="../img/python.png" alt=""></a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 visible-lg">
              <a href="#"><img src="../img/java2教程.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
  </article>
  <footer class="container-fluid visible-xs">
    <div class="row">
      <div class="col-xs-4"><a href="">分类</a></div>
      <div class="col-xs-4"><a href="">我要卖书</a></div>
      <div class="col-xs-4"><a href="">个人中心</a></div>
    </div>

  </footer>
</body>

</html>